<template>
	<div class="container" ref="refContainer">
		<div class="doc-content">
			<div class="title">
				按钮说明文档
			</div>
			<div class="sub-title quote">
				有人问能否去掉水波纹效果。<br />
				答：这是作者的恶趣味，作者暂时还不想去掉。
			</div>
			
			<div class="example-title">引入方式（按需）</div>
			<code-view>
				<template slot="code-js">{{ jsCode1 }}</template>
			</code-view>
			
			<div class="example-title">基本用法</div>
			<code-view>
				<template slot="code-html">{{ htmlCode1 }}</template>
			</code-view>
			
			<div class="example-title">扁平化按钮</div>
			<code-view>
				<template slot="code-html">{{ htmlCode2 }}</template>
			</code-view>
			
			<div class="example-title">圆角按钮</div>
			<code-view>
				<template slot="code-html">{{ htmlCode3 }}</template>
			</code-view>

			<div class="example-title">按钮的尺寸</div>
			<code-view>
				<template slot="code-html">{{ htmlCode5 }}</template>
			</code-view>
			
			<div class="example-title">图标按钮</div>
			<code-view>
				<template slot="code-html">{{ htmlCode4 }}</template>
			</code-view>
			
			<div class="example-title">Loading状态</div>
			<code-view>
				<template slot="code-html">{{ htmlCode6 }}</template>
			</code-view>
			
			<div class="example-title">全屏按钮</div>
			<code-view>
				<template slot="code-html">{{ htmlCode7 }}</template>
			</code-view>
			
			<div class="example-title">&lt;gr-button&gt;属性</div>
			<gr-table :width="800" :tableData="propertiesExplain" textAlign="left">
				<template v-slot="{rowData}">
					<gr-table-column label="参数名称" width="60">
						{{rowData.attrName}}
					</gr-table-column>
					<gr-table-column label="参数说明" width="150">
						{{rowData.introduce}}
					</gr-table-column>
					<gr-table-column label="类型" width="80">
						{{rowData.type}}
					</gr-table-column>
					<gr-table-column label="可选值" width="120">
						{{rowData.optionValues | stringify}}
					</gr-table-column>
					<gr-table-column label="默认值" width="60">
						{{rowData.defaultValue}}
					</gr-table-column>
				</template>
			</gr-table>
		</div>
		<div class="demo-view">
			<div ref="refCellPhone" class="cellphone">
				<iframe src="./demo.html#/buttondemo" frameborder="0" width="100%" height="100%"></iframe>
			</div>
		</div>
	</div>
</template>

<script>
	
	import Demo from '../components/Demo.vue'
	import CodeView from '../components/CodeView.vue'
	export default {
		components: {
			Demo, CodeView
		},
		data() {
			return {
htmlCode1: `<grButton >默认按钮</grButton>
<grButton color="primary">主要</grButton>
<grButton color="success">成功</grButton>
<grButton color="warn">警告</grButton>
<grButton color="danger" @click='btnClick'>危险</grButton>
<grButton color="purple">自定义颜色</grButton>
<grButton disabled>禁用按钮</grButton>
`,
jsCode1: `import {Button} from 'gabriel-ui'
Vue.use(Button)`,
				htmlCode2: 
`<grButton flat color="primary">主要</grButton>
<grButton flat color="success">成功</grButton>
<grButton flat color="warn">警告</grButton>
<grButton flat color="danger">危险</grButton>
<grButton flat color="purple">自定义颜色</grButton>
<grButton flat disabled>禁用按钮</grButton>
<grButton flat :border="false">去边框</grButton>
`,
				htmlCode3: 
`<grButton round>默认按钮</grButton>
<grButton round color="primary">主要</grButton>
<grButton round color="success">成功</grButton>
<grButton round color="warn">警告</grButton>
<grButton round color="danger">危险</grButton>
<grButton round disabled>禁用按钮</grButton>
<grButton round color="purple">自定义颜色</grButton>
`,
				htmlCode4: 
`<grButton icon>文字按钮</grButton>
<grButton icon size="medium" color="warn">
	<grIcon name="ashbin" size="20px" color="white"></grIcon>
</grButton>
<grButton icon disabled>
	<grIcon name="ashbin" size="22px" color="#888"></grIcon>
</grButton>
<grButton color="orange">
	按钮文字
	<grIcon name="work-filling" color="white" size="16px"></grIcon>
</grButton>`,
				htmlCode5: 
`<grButton size="mini" color="primary">mini</grButton>
<grButton size="small" color="success">small</grButton>
<grButton size="medium" color="orange">medium</grButton>
<grButton size="large" color="purple">large</grButton>`,
				htmlCode6: `<grButton color="danger" :loading="true">默认尺寸</grButton>`,
				htmlCode7: `<grButton block color="primary">primary</grButton>`,
				propertiesExplain: [
					{
						attrName: 'color',
						introduce: `按钮的颜色, 系统默认提供了'default','primary','success','warn','danger'五种内置类型颜色，需要自定义时，直接使用颜色名称或颜色值即可`,
						type: 'String',
						optionValues: ['default','primary','success','warn','danger','其他自定义颜色'],
						defaultValue: 'default'
					},
					{
						attrName: 'size',
						introduce: `按钮尺寸`,
						type: 'Boolean',
						optionValues: ['mini','small','medium','large'],
						defaultValue: 'medium'
					},
					{
						attrName: 'disabled',
						introduce: `禁用按钮，禁用时点击事件无效`,
						type: 'Boolean',
						optionValues: [true,false],
						defaultValue: 'false'
					},
					{
						attrName: 'flat',
						introduce: `是否为扁平化风格`,
						type: 'Boolean',
						optionValues: [true,false],
						defaultValue: 'false'
					},
					{
						attrName: 'border',
						introduce: `是否带有边框，只在扁平化风格生效`,
						type: 'Boolean',
						optionValues: [true,false],
						defaultValue: 'true'
					},
					{
						attrName: 'round',
						introduce: `是否为圆角按钮`,
						type: 'Boolean',
						optionValues: [true,false],
						defaultValue: 'false'
					},
					{
						attrName: 'icon',
						introduce: `是否为圆形按钮, 不建议使用文字，可能会显示不全，应改为图标使用`,
						type: 'Boolean',
						optionValues: [true,false],
						defaultValue: 'false'
					},
					{
						attrName: 'loading',
						introduce: `是否为loading状态，loading状态下，点击事件无效`,
						type: 'Boolean',
						optionValues: [true,false],
						defaultValue: 'false'
					},
					{
						attrName: 'block',
						introduce: `是否为全屏按钮`,
						type: 'Boolean',
						optionValues: [true,false],
						defaultValue: 'false'
					}
				]
			}
		},
		mounted() {
			let ele = this.$refs.refCellPhone
			this.$refs.refContainer.addEventListener('scroll', (e)=> {
				ele.style.top = e.target.scrollTop + 'px';
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
</style>
